#How do I add a class to an element in HTM | Explore Tumblr posts and blogs

vaporgrvve · 7 years ago

Text

I was falling asleep in my html class so i thought it would be fun to try and transcribe my professor

I’m glad i don’t get paid for this

it will og thoruhg an mak now i the ok and are sppost used once ans onw watoyu to hony hae one instance of tat i per pge bt lie is aid eb prbosers have this intelligence built into them so we'll just go ahead and suck dick asshole this according the book the book says you shoud really only hae on e id per page asicaly this is aying her id pair one id para one id=para one yeehaw we're gonnacenter ot and change it to red and it does tiat over there and another thing we can use and this is the one that they would reommend they wo yyou woud use multiple times is the .para1 the dot stands for calss so you have this class and so we would have to change id to class and when you run it nothing chanegs nothing should have changed thankfully we're calling it by class naem and i f you thin aobu tit if your class was books so you cald have like 12 different 2 div element with the class books as part of its bulild i [ bit isode eacj p tse dive elements id of boook 1 and so as boook 1 woul dhave certain attributes to it or you go for like genre and you go for action book you know colors that made it look ike action or colors thatmade it look like drama change the font and sizes and stuff thats just another way of thinking about it uh lets seeyou can also add ave a selctor that isnt an element oh its a class never mind how did i work this so lets do this here i wanna chagne something up real quck so we're gonna make antoehr class called red and so when we run that our paragraphs are set up as um center (do you need a regular olumn after center) yes that would help but theres nothing after regular class so now when we run it now we have a center class and we hav ea red class okay so center red self explanatory now if we wwanted to we could also go into the calss and ahdd red if we wante and run it there nothing that asy syhta you ant have ceretered red bold italizzied whateer you coud add multiple ones you sepearate them with a space you dont need to use commas lets do okay so the h1 header tag over theres what colors it gonna be and it comes down here to this rule for h1 and the last thing it reads for h1 is green and then it goes int the body for the text so order matters so order matters now you han hav h1 n msthnd rdry font familes set snad margins set anbd backgrounds set and down ere you just come here and change the color all the other declarations you made up here and will still mtake effect its just that it will change the things in that order so uhh whts a good background color for blue (black) well go with yellow i like yellow so the backgrounds still yellow but the colros not ble because down here we redfined the color to green i could hae 12 different declaratinons down ehre in one rule but its not gonna change the color because its overruled by this one so oh i donno if i mentioned but also your ruloes have also the uh the culry pointy brackets and the front and the end so lets do something os this type of code right ere is called embedded code becase your embedding your source sss styles insid the same document theres also inline coding we can also go style= and inside the style we can say "background" is red and so uh you can use the style attribut eto come down eher and change the backgorun dto chang ethe so it follow sht esame convention p here bu you dont use the angle curly brackets you just use the in html you just use the html qute sbut yu still gotta use the quotes space but margin of five margin colon 5px to set the margin nowup here we set the ackgroud to the h1 o yellow so the question is now that we have this inlinecss code is this inline coe gonna change it to red or is to gonna stay yellow say that with authority yes it will chagne it because you read the scirp yyo read the css script in the head but it comes down to load thte page so down here we gonna cange it and so lets chang ethat to 25 so you can se whereas you ca have multple so you can have 25 250 different attributes that owuld be horrendous as an inline code if you ahve more than 2 or 3 you might want to have a linked file for your htm code if your doing we;ll well get int that in a bit later so yes you can hav emultiple on inline and since whitespae doesnt matter if you wanted to you could come over her eand clean it up and make it a litle bit nicer but oyu dont have to it can all go one line uh mkay so here we;re saying the sma ething we're taking a pragrah and adding class syle center with it wheras this h1 tag down it is class center as you can see it ddnt get affected its setill the default text what w'er syeing here is anyparagraphy that as the class center will cange the text so yo ca n build you can have a paragraph dot center dob old dotitalicised and as long as you have a class thats class dot center dot bold dodt italicized so whats this allowying you to do si drill own deeper to pick spceific amounts of your code to maek ajdustments deeper so we talked abot the dot calss talked about th ahshtag id theres uh the astersk the star which means select allso if you sue th asterisk that will effect everything on the page and i would recocomendd if yu werer using that ot use it at the very top cause if you go through and write twelvehundred lines and put a star at the end well its just gonna do that to everything on the pageyou can pick a specific element like we were usig the h1 tag and a you can do the element comma element and what that means is it selects all the div statements and all the paragraph statements so any div and any paragraph it;ll select oh o fthos element space element and this example div space pargarph itll select all paragrapsh taht are inside a div so wehreas the one example i shwoed yall it only faffected the one paragraph inside the div itum you have div greater than p which seelcst all pargrpah element where the parent is the div element so uh what the diferent between div p and div greater than p if its slelcting all the p ewthin the div element and the div element is the parent wuld it not do every sing le p thats inside the div uhh i wouldnt you can but i wouldnt but no what if i had a div element that had a pragraph and you can put a div inside a div aso you ahve a div that insie a div and inside that div i have a header or correct close yes yes um we have so so asicall the key word is the parent your div container is the parent and everything you have insie is a child if its a 1 layered element would be achild all thos childs inside the div are siblings but if you have oe child that has other elements in side it then those elements are now considreed child elements of the child so think of ti his way you got the parent the child and grandchildren in this case you got div space p id doesnt matter you're a p element you're gettin gchagned bu in the greater than p element its only selecting ones wehre the div is the parent the hild paragraphs isid ethe div will get affected ub tnoene fo the grandchild paragraphs will be affected uh element +elelents slect all eleletns palced mmediately after the div element so this isnt ehs ame as these two the plus mean you ahve an opening n ending and right underneat that you hve a pargarpah if thers anythin gin between likek a header that doesnt coun dany paragraph taht precedes succces is that right come after the div thg then you can select that so yu can hve a div box and then thsi first paragraph you wanna do somethin glikke that so say you the div container loosk like a bo then the pragraph looks like citation or captions you put beneath it uhm so and and a lto fo the stuff in ehre gets really detailed about how to drill dwon to very specific tpyes we;re not really goingtb be testing on an y of this here bt its good to know what it can do lie one the attribut ehere we;re gonna so what wer edoig ehre iwers for all anchor tags that have aterget the target is um you know nerscore blakn or nderscore what sthe other one self umt that if it has a trget set to it then were gonna do smethign t it as you can seee over here disney and wkiikpedai are highlighted and that sbecause ver hiere in the cod ethis acnchor has a target and this anchor ha s target but this anchor doesnt so you can spefici y you know if thinks ga hve targe with the suqare brackets then you can change che oding format for thiseo eleents so that gives you a lo t ofstuff to play with thers also the he pseudo codd of the colon active the colon check the colon uhhh visited the colon visited uhh we'll get into sudo code thirsay so sudo code is basicall eyour hyperlinks when yht ehyperklins are blue with hyper ink when you go back its purple when itis blue its the its non visited so that sone set of sudo code if you put the mouse over the top f thinlink sthat s ahuver sudo code make chagnes so if youre hovering oeer the top of ti you can have it so that if yo click and hod its now the ctive item on the webpage so thers a active which you knselects that linik and makes certain chagnes ot it so if i oe over ehre and lcik you can see how it chagnes the background help you indivate which one yo clicked on uhm change that ot hover so now eny etime i hoever it chagnes um this visited os if i go to tw3chools and go back run it again you can see how it does the default you know gives it the dafault text and underlines it so sudo code has the colon and the action uh behind it so you know theres all this thing sike first type of the first tpye of p thie feirst paragraph itll do something to it first line the first line in any pragraph you can have that fisr line set p any tipe of whay uh heres also in rage that gets more whn you get into forms you can say tou can specifiy a nubmer btwentenn one an dten yhe box trn red o whatever and so i would reccomend you go hrough and you paly with sme of thse get more to see what spout the ther enth type so on the nth tpye we have the it comes in there nth type of 2 so thsi is the second type of that instantce of that pargraph type and the other cool gint you can do is n pls one and so then it willl do the second one of each one and um thers also a more thers uh theers a formula way thers a wordw way you can do even you can do odd so for like if your doing om list items you got an undrorderd list or whatever you want ever yoher one the bkagornd to be a different oclor if youre dongtables you can make each instance a different table color or you bn do columns or whatever lets see umm t t t t tum css is=f you ytpe in css elector sin google you;l get that one if you tpye in css cssrule for the other one but for what i can do is wheres my other book mkay so you shoudl aslo thaev the links to those now and so that shta tso we talked about the inline codning and you use inline normally ou use it wht a style if you wnat to slaso wit inline coding ayou can use the elment the way i did it is i made it part of the leemtn itself where i used like the the elementp tag and then i ype din styles = brakets you can do ti that way you can do it thtis way here whe its insid ethe element brackets itsel the lemetn tag itself you can slo do the a no i was gon say you coan ould t a style its not a style span you can use span equals or span style= dot dot whatever it is and then close the spanyou can use a span as a separate elemtn all together and you can span a whole block of code but if you onel y wan to affect iand im just aying if oyu had multiple raows and you wanted ot snteadof oputtging ths pan say these erw diferent elemtn tpyes instead of putting them linine the way it was orgiinally you use a span and span the whole section so you can use a span to affect awhole block of code yo could have the code inside the tag itself al that scisondiered inline code casue its in the code of the body ihembeded code is wehre inseid the header we embedded all or css scrip insdie the header an separate file o yur css code i beleve were gonna star cearting next week you ahave a link and the link goes insie your header and the rel equals sylesheet youre telling the html processor that oyur bringing in a stylesheet versus a pdf or worddoc so youre letting it know your bringing in a stlye hset and this is the licoation subfodler director yfilename and that will bring in all yur css dcode first eause youl;; have this link oin your header so it gets read vefore the do cactually displayso nthe screen um talked about soe of the different slector yles you ve got eh asterisxk which means select everyhin inf you ave tha at the bottom then uh if its the ast rule then its all the stuff its not gonna work so dont put att at te op use it as a universal universe default set all margins to zero set all atrtributes sna values ot whatever you want it to be um you ahve um nalement which is just a gtag h h1 paragraph slector groups differnet tpyes of gorups commat gag space gtag grater than tag you got um gthe different calsles a class us ea a dot so its dot whtever the calssname is the id you have uh the hastag so tis hadshat whatever the name you want to call it so thers the the three differet ways you can embed attach css coding to your html and so there s benefits and ownside ts to each tpye and gerneally when you are wiritng your cod eor when yo''l decid to use one tpye its best f your gonnad o all you code to do tit one wy or another like i said everything has that order so if it comes to a rule an i says h2 is this thsi thsi an dthis an dthats in a linekd file a nd then it goes into youhr html and you se t h1 to thsit sthist that overruels what your file is and if you get all the way down theo the code tin thea itsel fin thtml oe and you ahve your css cscript cahged and thats why metellen iwhyn you turn on yiou porjects do it as clsoe to tej instrctions as possible and while i do encourage you and enthus that youre adding l hsiexra stutff and taking intiatnive and stuff it can utnr yoarund an byire youh in the end casue when swe start adding your css scrips and youre gonna chagn eall this suff in the filae and you view it in teh broweser and its no tchanging oh its not chagnign becasue youre embedde dthis html code inline that overreide seerything else you se tbefore so soe of thse befeits of embedding css so puttin it in the header if if your e wiritn a file an your in the developnent mode of somethign dand youwanting ot have a di velement ot add s certain way so your not afefcin the whole entire wepage you jsut wannta gagke thsi div iece and put t so you can take amake ceratin chagnes and yoll yu pre aming o quock nchagnes how many pixels do i need ot mov ie ti in throguh ahow big of a mragin do i need or wahtever emebedding is quikc way to pit all your code atht ehtop and akigy your chagnes so when youre looing aouyr browser iew and your efersh loh that what it does the downside tit akes a litt le mroe tume so each time you make ahcange oyu gotta og in tehre andreolatod it um and it only works on tat document so fi you onleny embed sio head fo one document so and 215 mage website and oyu want oyour website ot alll liook the smae have thes ame h2 tag shave te asmpepa tags 1 same dive tags set it up in acertian way emebedded coding and then if i dnt lie that colro hagne it ynow you gotta go to each otf those files and change the color in eacho neo fhte gags so its good for quick testing bu tnot so good for it only works on taht one page uh inline coding antoerheqick way of tetinga dn wehre here at the school we have aporgram for the schools website so wen you go tall that sdone hrouhg a cms called farcry which is baically a big huge datbase wehre i can put all iny my text and click thehtml code ansd go in make edits to the html code by going the html cod ei can do html inline beacaseu the only opetions i have in theeditor is choosea text xtyle whic is h 1 ht2 hthre etitle normal preand sme iother option so there seign header fillls o set te highg and the an dth boldness an thing like that to the text heich ibery bad css programming adnyou rlimited to what you can do you can tput in div tags or tabels or float anythin but i can pit in inline snippets and change the webpage to how i want it bt its difficult ot change and its indie the tag the nsomething you gottta change lines and lines nd find thestyle to make chages um now in s a separate file its thereseveral benefits you ts want its one ychange anto the header you cannge the h1 sicze from 35 p to e7 px well thatw illl go through and that affets every linedkd file linekd with taht one fil e if youve makede a change makng a change with just one changeum also allwoes you to maek an easy considatant webste look so the lookl and feel to eac page hwny u cgo from each page iit al looks like your in the smae wepabe and oyu'ev ot yur different talbbles link lists on the side a certain way so whe you go from tpage to page to page it all looks the sme and oyu can link tit to different websites f you'r eon a ebsite an doyue lie yman theve gos ome cool styles you ccan look at the tml and see if they've ot the style linked yo can take their link an dput it into yours now you can t see their file mybbe you can mayeb you ant bc if you mosmetimes thaty dont maek it where you can use tib gut not see it fi you can se it you can actually readd their code if oyu do that like you can sue vertai id names or ceratin clssnames then youd also have to change all your calsss id tags and values to match those so yoit youwld ahve ts ame look the downside si um its a luearning curve its um you ahve one big huge file adn you can go through and after showing alyou all the differentway soyu can add um youk nwo all ptags that are insdi e a di v all petags that are in the parent di so theres that learning curve on the pcompelxity oyu ca n put in it and thers a lotof of extra work done in the begining then theres more owork in the begoinign setting up a whiole file itself so yeah thersum when when you're in a borwser you can do to tools and thers eevelopert too sand in the eev eloper tools it comes over ehre and whos you fhe code for the page and whos you the paramets over ehr ewher its ecratche dout it shwere those have been overwritten thes upm aslo therse sometimes itll tell you f therse liekerrors on the pag enad stuf fhtis is agood tool to go tlook through your page see fiy all yoru tags ar ein the erite spot if ihad a pa ragraph wrigthg iudner hsi but had my h1 tag afte rthe inital paragrpah tag so i had angle bracket p angle bracket here it would show me an error here but iwould show you in the ool over there that your h1 tag is in the incorrect spot so there yesh um oky so thats covers that lets getrid of some of this lets go ahead and weve go t afew mintes for the la well go voer the lab real quick lets go over the lab a s aclass excericise if i can get it to open it it it gets whats that oh did you not get an email though wel thats no good if im sending all these announcements there now you should see em cause if i send oyu a message it ll pu ta messag ena ditll send oyu an email okay good to know uh was it lab number five so well go ahead and eerone open up notepad real quick well go through these as a class discussion an dthen submit it afterwards so i know whos here and who should get the five points

0 notes

begradecalculato-blog · 8 years ago

Text

how to calculate a final grade with percentages

Use your answers to make both your rescript and test strategies and the cognition of your answers (Ch 57, Ch 62). A whole of 41 or 27.9 %, nonetheless, revealed that they screw minor or no reach at all to these technologies. Espino’s (2008) year grade calculator revealed that most eminent schools of Nueva Ecija, had no seize authority organization, instant compose, budget organisation and apart body for ICT, minor access to ICT equipment, internet and line connections. Students somebody modest access and use of ICT equipment and rarely use ICT for civilise make. CONCLUSION The results of the questionnaire calculate my grade percentage grade on test illustrate the overall supportive attitudes toward synergetic practices. The differences between the students who had only expropriated an prefatorial action and the modern students evoke that the key to dynamic whatsver disadvantageous attitudes toward cooperation is a long-term toil with continuing synergetic practice in the university room. As the students progressed they became progressively author good towards synergistic recitation. The sexuality provision is one that requires further research. One can exclusive invest how sexuality differences are manifested in the predominantly pistillate classes we observed. One wonders whether the differences in knowledge justification problems in mixed-gender groupwork. For lesson, if the men undergo that when the task has transmute problematical they faculty do amended by themselves whereas the women opt to remain as a foregather, one can envisage either retraction from open status by the men or public battle. In element, commonwealth and position problems are belike adjunctive to these differences in attitude, making many men promote various I outlook I wouldnt interpose with the groups. I would try not to but Im certain it would make my viscus pain. "Paige Terms, Pupil educator, Businessman Teacher test grade calculator for students Papers, Year of 99 3.1.1 Organized Universities Corporate universities" organisation in-house preparation and developing initiatives " know been around since the 19th Century, when hulky companies specified as DuPont, Generalised Car and Artificer introduced corporate classrooms to provide further training for employees. In the 1980s the term entered into mainstream acting cognition and in past life these programs mortal dilated in cro and situation, augmenting educational systems in countries throughout the grouping (Structure on Borderless Higher Breeding, 2004). There is astonishingly soft data on the product and size of these programs, though their salience has been on the origin since the belatedly 1990s. 18 In 2000, nonstop and sidelong grooming costs in the US reclusive aspect totaled between 284 and 387 1000000000000 dollars yearly, making the nonpublic aspect the largest bourgeois of grownup upbringing in the land (Observatory on Borderless Higher Teaching, 2004). The extent of the education provided by these operations varies greatly. At one end of the spectrum is McDonalds Hamburger University- a artist organization education, training students in skills required for nucleus operations for their job. At the additional end of the spectrum is the Ruschilon Artifact in Svizzera (owned by Land Re and Bings Leading Exercise Country) which book as a corporate imagine tank where executives can treat prevalent trends and acquirement corporate strategy. In-between are thousands of initiatives grooming employees in specialised skills, faculty technique, and indispensable intellection skills. Corporations oft use their training facilities as commercialism points to possibility employees and boniface governments. The latter are often raring for companies to initiate these skill-training facilities in their countries hoping that present refrain increment the stalk of manlike capital. Corporations oftentimes tally greater attain to resources than do unrestricted universities and content activity in operable skills and new technologies that may not be otherwise accessible. Although most of these As the students delimitate their final grade calculator college in giving with their own beliefs, they get their own variety or communication in feat nsis. These students teach their identifying activity which serves as an indicator or person’s intervention utilities and capacities (Gregor, as cited by Leoveras, 2001). Unitedly, the student’s ain epistemological beliefs and what do i need on final styles contour the learner’s capacity to comprehend and interact accumulation and construe it in stemma with their own psychic hypothesise. In the illumination of this speculate, it is principal that a alum understands himself in visit to explore his exclusive consciousness, his own perspectives and his own assumptions roughly his experiences in and out of the schoolroom as his germ of nsis. Tableland 19: Way Materials Acquirable on MIT OCW Place 2005 (of add 216 classes open) Crucial Proportion Readings 98% Lectures 82% a Recitations 47% Assignments 93% Assigning Solutions 39% Labs 82% Exams 60% Test Solutions 33% Projects 88% This is where members of a instruction assess apiece others make. For a placard representation, members of a assemble may set apiece others endeavor as location of the aggroup, and/or members of the people may adjudicate apiece others posters. Experience in halls of abode and remaining rented advance Experience at habitation Making the first moves Maintaining connections The shadowing web-based resources may be useful in choosing proper readings. Your recite of elite readings may be included in the syllabus or suffused in conference. Yet, let only those resources that you expect students to use throughout the row. Additional readings should be diffuse as needful. Siddiqui, B. H. (n.d.) Evolution of humanities manifestation in Pakistan. Retrieved from ÃÃ http://www.allamaiqbal.com/publications/journals/review/apr89/9.htm Philosopher, J. (1897). My pedagogic credo. Schooltime Writing, 54, 77"80. Retrieved from ÃÃ http://dewey.practicality.org/creed.htm Volume variety: Saiyidain, K. G. (1977). Iqbals educational ism. Retrieved from ÃÃ http://education5.net/i/iqbal%E2%80%99s-educational-philosophy-e757 Discourse with Dr Ashfaque Ahmad. Retrieved from ÃÃ http://www.afed.itacec.org/document/aziz_kabani_and_somaiya_ayoob.pdf Freire, P. (1993). Method of the oppressed. Chapter 2. New York: Continuum Books. Retrieved from ÃÃ http://www.webster.edu/~corbetre/philosophy/education/freire/freire-2. html Bree, C. G. (2000). The Ancient Greeks, Break Two: Socrates, Plato, and Philosopher. Retrieved from ÃÃ http://webspace.board.edu/cgbr/athenians.html Speech to someone already in the job. This could be a individual of your parents, or someone you person met socially or at job fairs or on position visits. Integer 42.2 Evince families. As you grow your cognition you leave acquire that you live the language you essential to use, but it may not looking or stable quite right in your text. This may be because you someone not old the statement in its right appearance.

0 notes

deck16 · 8 years ago

Text

Tutorial: HTML GM Notes with Inbuilt Rollers

I’m a programmer and a table-top RPG GM. I’ve been creating my notes in HTML for a long while.

Why would anyone write notes in HTML?

You can view them from any device that has a web browser. A computer. A laptop. A tablet. A smartphone.

You can host the file on the web or tote it on something like a USB flash drive.

No paper or pen is needed. You can even mark off hit points and other variables in the HTML itself.

You can use hyperlinks to scroll quickly between content, or link to off-site information.

You can use JavaScript (and JQuery) to add useful tools in amongst the text.

Here is an example I’ve created for this post. It’s basic, but it shows the features listed above.

I get that other GMs will have other methods that work for them, and that’s fine. This post is about sharing with anyone who might be interested. It is aimed at beginners with little to no knowledge of HTML etc.

Let’s get started.

Step 1: Making an HTML File

We’re talking simple HTML here. You don’t need to be a website developer to make simple notes for yourself.

I’m not going to teach the basics of HTML. There are plenty of tutorials out there for that. Go check out this one, for example. You only really need to know the basic tags, and how to create the HTML file and view it in your browser of choice.

Let’s go through some HTML features that can be especially handy for GM notes. You can see examples of each on the sample notes.

Linking

You can link to other web pages. Some RPGs have lots of materials (official and not) available online. You might link to the stat block for an archmage and link the spells -- like fireball -- she’s likely to use.

When you link off-site, consider using the target attribute so the link opens in a new tab. More information here.

You can also link to sections within your document by using an anchor. This will let you jump around easily. More information here.

Form Elements

Normally form elements are used for things like online shopping. The input box fields where you type in your credit card number and stuff like that.

We can borrow these fields for our own use:

A free-form text input (or its bigger cousin textarea) is a great place to write notes down.

A number input is great for something like hit points. And it can be set up with minimum and maximum bounds.

Highlights

The mark tab makes text stand out. It can be useful for important notes you don’t want to forget.

WYSIWYG Editors

You can create HTML in a text editor. (The HTML tutorial I mentioned above suggests using Notepad or TextEdit.)

Typing out basic HTML by hand isn’t the worst thing in the world, but it’s not as easy as using a word processor.

You may wish to download and use a WYSIWYG (what you see is what you get) editor. These allow you to make HTML pages as if you were using a Word Processor. They also allow you to go edit the HTML code directly if you need to.

I’ve used Bluegriffon and Amaya in the past. Both are free. But there are many more out there.

Step 2: Inline Dice Roller

By now you should have the skills to create notes in HTML.

But why would you? Wouldn’t it be easier to use Word or Google Docs or any of a myriad other editors?

This is where HTML distinguishes itself. You can insert into your HTML document useful interactive tools. For example, I am going to show how you can include a dice roller button in your documentation. So instead of seeing the text “roll 2d8+3″ and reaching for the dice, you can just click the 2d8+3 itself and watch as it produces the answer.

In your notes HTML file, add the following code inside the head tag.

The first part instructs your browser to load JQuery, which we will be using.

The second part instructs your browser to load a file called “scripts.js” which lives in the same directory as the HTML file. You haven’t created that file yet: let’s do that now!

Open this file, and save it as “scripts.js”. You can download it, or you can copy all the text and save it into a new file -- whichever you find easier. Put it in the same directory as your HTML file.

(You can edit this script file if you wish, but you’ll need to know JavaScript and JQuery. That’s beyond the scope of this post.)

One last thing to do. Put the following code somewhere in the body tag of your HTML file:

<p>The bandits have collected a modest sum from their work today. They have <button class="roller">2d10</button> gold coins and <button class="roller">1d4 - 1</button> platinum coins.</p>

Save your HTML and reload it. You should see two buttons with die-roll formulae in them. Click to roll! A total should be shown.

(If you're having trouble, try viewing the source code of the sample notes. Seeing it “in action” may help you out.)

The code to make a roller looks like this:

The class="roller" part is important.You can change the text inside the button tags to change what is rolled, as long as it is a “simple” die formula, such as d20, 1d100, 3d6, 8d8+8 or 2d4-4.

What Next?

Styling

So far we’ve not included any styling to our notes. We’ve been using the browser default style, which is perfectly usable if a bit bland.

You could use CSS to style your notes. Here are some things you could do:

Generally change styles to your liking, especially font type and font size.

Improve the look of tables containing creature stat blocks. You could make the header a more eye-catching style, and make alternating rows different colours.

Incorporate responsive design: styles that change depending on device or screen size.

You can find a tutorial on CSS here.

More Features?

This post covers most of the features I have in my GM notes, but it leaves out a few of the fancier tricks. If there’s enough demand I may make follow-up posts to this one. If you’re interested in seeing more, leave me a message below.

#rpg #tutorial #html #jquery

0 notes